<template>
  <div class="wo-de">
    <div class="hearder">
      <div id="leftimg">123</div>
      <div class="center">{{ username }}</div>
    </div>
    <div class="content">
      <div class="item" @click="$router.push({path: '/index/mianjing/hmarticle', query: { username: username, token: token ,listType:'收藏'}})">
        <div class="img" ></div>
        <div class="text">历史记录</div>
      </div>
      <div class="item" @click="$router.push({path: '/index/shoucang/hmarticle', query: { username: username, token: token ,listType:'收藏'}})">
        <div class="img"></div>
        <div class="text">我的收藏</div>
      </div>
      <div class="item" @click="$router.push({path: '/index/dianzan/hmarticle', query: { username: username, token: token ,listType:'点赞'}})">
        <div class="img"></div>
        <div class="text">我的点赞</div>
      </div>
    </div>
    <div class="footer">
      <list-menu :text="'推荐分享'"></list-menu>
      <list-menu :text="'意见反馈'"></list-menu>
      <list-menu :text="'关于我们'"></list-menu>
      <list-menu :text="'退出登录'"></list-menu>
    </div>
  </div>
</template>

<script>
import ListMenu from '@/components/ListMenu.vue';
export default {
    components: { ListMenu },
    name: 'WoDe',
    data() {
        return {
           username: '薯条可乐猫', 
           token: '1234567890'
        }
    },
    created() {
        // 添加空值检查，确保从路由查询参数中获取的值不为空
        if (this.$route.query.username) {
            this.username = this.$route.query.username;
        }
        if (this.$route.query.token) {
            this.token = this.$route.query.token;
        }
    }
}
</script>

<style scoped lang="less">
.wo-de{
  background-color: #f5f5f5;
  .hearder{
    width: 100%;
    height: 150px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    .center{
      margin-left: 20px;
      font-size: 20px;
    }
    #leftimg{
      width: 100px;
      height: 100px;
      background-image: url("../assets/hutao_suxue.png");
      background-size: cover;
      border-radius: 50%;
      margin-left: 20px;
}
  }
  .content{
    width: 100%;
    height: 150px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
      justify-content: center;
      align-items: center;
      background-color: #fff;
      
      .img{  
        height: 60px;
        width: 60px;
        background-image: url("../assets/Keli.png");
        border-radius: 50%;
        background-size: cover;
        margin-bottom: 10px;
      }
      .text{
        font-size: 12px;
      }
    }
  }
  .footer{
    width: 100%;
    background-color: #fff;
    margin: 20px 0 0 0 ;
  }
  
}
</style>
